<template>
	<view class="ct-content">
		<view class="bar">
			<view class="left" @click="getHome">
				UNI_UI
			</view>
			<view class="right" @click="open">三</view>
		</view>
		<page-index v-if="componentName == 'page-index'" />
		<page-button v-if="componentName == 'page-button'" />
		<page-color v-if="componentName == 'page-color'" />
		<page-empty v-if="componentName == 'page-empty'" />
		<page-tabs v-if="componentName == 'page-tabs'" />
		<page-popup v-if="componentName == 'page-popup'" />
		<page-icon v-if="componentName == 'page-icon'" />
		<page-transition v-if="componentName == 'page-transition'" />
		<page-subsection v-if="componentName == 'page-subsection'" />
		<page-modal v-if="componentName == 'page-modal'" />
		<page-datetime-picker v-if="componentName == 'page-datetime-picker'" />
		<page-area-picker v-if="componentName == 'page-area-picker'" />
		<page-cropping v-if="componentName == 'page-cropping'" />
		<ct-popup ref="ct_popup">
			<view class="content-nav">
				<view class="title">组件</view>
				<view :style="[item.componentName==componentName && itemStyleComputed]" @click="getComponentName(item)" v-for="(item,index) in componentList" class="component-name">
					{{item.name}}</view>
			</view>
		</ct-popup>
	</view>
</template>

<script>
	import pageList from './page.js'
	export default {
		data() {
			return {
				componentName: "page-index",
				componentList:[]
			}
		},
		onLoad() {
			this.componentList = pageList
			this.componentName = uni.getStorageSync('componentName') || "page-index"
		},
		computed:{
			itemStyleComputed(){
				let style = {
					"color":uni.$ct.color.primary,
					"font-weight":"bold"
				}
				return style
			}
		},
		methods: {
			open() {
				this.$refs.ct_popup.open({
					mode: "left",
					isCoverClick: true
				})
			},
			getHome(){
				uni.setStorageSync('componentName','page-index')
				this.componentName = uni.getStorageSync('componentName')
			},
			getComponentName(item) {
				uni.setStorageSync('componentName',item.componentName)
				this.componentName = uni.getStorageSync('componentName')
				this.$refs.ct_popup.close()
				uni.pageScrollTo({
					scrollTop:0,
					duration:100
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ct-content {
		padding:88rpx 32rpx 0;
		box-sizing: border-box;
		.bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: calc(100% - 64rpx);
			position: fixed;
			left: 32rpx;
			top: 0;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			border-bottom: 1px solid #eaecef;
			/* #ifndef MP-WEIXIN */
			border-top: var(--status-bar-height) solid #fff;
			/* #endif */
			
			z-index: 10;
			.left{
				font-size: 32rpx;
				font-weight: bold;
				color: $ct-primary;
			}
			.right{
				font-size: 36rpx;
			}
		}
		.content-nav {
			width: 350rpx;
			/* #ifndef MP-WEIXIN */
			padding:calc(var(--status-bar-height) + 32rpx) 32rpx 32rpx;
			box-sizing: border-box;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			padding:32rpx 32rpx 32rpx;
			box-sizing: border-box;
			/* #endif */
			

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #2c3e50;
				margin-bottom: 24rpx;
			}

			.component-name {
				font-size: 24rpx;
				line-height: 60rpx;
			}
		}
	}
</style>